<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片裁剪 Image Cropper</title>
<link rel="stylesheet" type="text/css" href="/Public/Plugin/imgareaselect/css/imgareaselect-default.css" />
<script type="text/javascript" src="/Public/Plugin/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/Public/Plugin/imgareaselect/js/jquery.imgareaselect.pack.js"></script>
<style type="text/css">
body {padding:10px 0;margin:0;background:#333;font-size:12px;line-height:14px;}
form,ul,ol,h1,h2,h3,h4,h5,h6,p {margin:0;padding:0;}
input,textarea,select,button {font-size:12px;}
img {border:none;}
em {font-style:normal;}
cite,small,address {font-size:12px;font-style:normal;color:#999;}
a {color:#00f;text-decoration:underline;}
#box { padding:10px;margin:10px 20px 10px 20px;background:#999;font-size:14px; }
/*演示内容*/
#imgBox {
	float:left;
	border:#333 3px solid;
}
#imgCut {
	border:#fff 2px dashed;
	position:absolute;
	top:30px;
	left:30px;	
	cursor:move;
}
#faceImg {
	width:<?php echo $width>500?500:$width;?>px;
}
#imgBox_pre {
	float:left;
	width:250px;
	margin-left:30px;
}
#imgBox_pre strong{
	display:block;font-size:12px;text-align:center;
}
#imgBox_pre button{
	width:80px;
	margin:0 auto;
}
#imgBox_pre div {
	width:150px;
	margin:5px auto 20px;
	border:#666 5px solid;
	overflow:hidden;
}
#data {
	clear:both;padding-top:20px;
}
#dobutton {
	clear:both; margin-top:8px;
}
</style>
<script type="text/javascript">
  var trueImgW = {$width};
  var trueImgH = {$height};
    function preview(img, selection) {
        if (!selection.width || !selection.height)
            return;	
        
        var height=$('#imgBox').height();
        <?php
           if($width>500){		
        ?>
        var scale1 = 500 / trueImgW ;
        var scale2 = height / trueImgH ;
        <?php
           }else{
        ?> 	 
        var scale1 = scale2 = 1 ;
        <?php  } ?>
        
        $('#x1').val(manthparse(selection.x1,scale1));
        $('#y1').val(manthparse(selection.y1,scale2));
        $('#x2').val(manthparse(selection.x2,scale1));
        $('#y2').val(manthparse(selection.y2,scale2));
        $('#w').val(manthparse(selection.width,scale1));
        $('#h').val(manthparse(selection.height,scale2));
    }

    $(function(){
        $('#faceImg').imgAreaSelect({handles: true,fadeSpeed: 200, onSelectChange: preview });      
        $('#sb1').bind({
            click:function(){
                docrop();
            }
        })
    });
    
    function manthparse(param,scale){
    	return Math.round(param/scale);
    }
    
    //执行裁切操作
    function docrop(){
        var x2 = $('#x2').val();
        var y2 = $('#y2').val();

        if(''==x2 || ''==y2){
            alert('请选择裁切区域 !');
            return false ;
        }

        $("#crop_form").submit();
    }     
    
    function ReturnImg(reimg,tag)
    {    	    	
    	var backObj = window.opener.document.getElementById(tag);
    	var prvObj = window.opener.document.getElementById(tag+'_preview');
    	    
    	backObj.value = reimg;
    	if(prvObj)
    	{    		
    		prvObj.src = reimg ;
    	}
    	if(document.all) {
    		window.opener=true;
    	}
    	window.close();
    }    
</script>
</head>
<body>
<div id="box">
	<form id="crop_form" name="setFace" method="post" action="__ACTION__">
	<input type="hidden" name="file" value="{$pic}" />
	<input type="hidden" name="tag" value="{$tag}" />
   <div id="imgBox">
    	<img id="faceImg" src="{$pic}" />    	
   </div>   

   <div id="data" style='color:#ffffff'>
    <b>X<sub>1</sub><input name="x1" type="text" id="x1" size="3" readonly="readonly" />
    <b>Y<sub>1</sub><input name="y1" type="text" id="y1" size="3" readonly="readonly" />   
    <b>X<sub>2</sub><input name="x2" type="text" id="x2" size="3" readonly="readonly" />
    <b>Y<sub>2</sub><input name="y2" type="text" id="y2" size="3" readonly="readonly" />
	 宽<input name="w" type="text" id="w" size="3" readonly="readonly" />
	 高<input name="h" type="text" id="h" size="3" readonly="readonly" />
	<button type="button" name="useold" onClick="ReturnImg('{$pic}','{$tag}')">使用图片</button>
	<if condition="$net eq 1">
  	<font color="#FFD700">网络图片不能裁剪</font>
  	<elseif condition="$allow eq 0"/>
  	<font color="#FFD700">只能裁剪jpg,jpeg,png格式图片</font>
  	<else/>
  	<button type="button" name="sb1" id="sb1">裁剪</button>
  	</if>	
    </div>
  </form>
</div>
</body>
</html>